<template>
  <div class="input-item border-bottom" :class="errorMsg == '' ? '' : 'warn'">
    <label class="label" for="">{{title}}:</label>
    <div class="input-area">
      <input 
        class="hover-style"
        :type="type" 
        :value="value" 
        @input="updateInputValue($event)" 
        :placeholder="placeholder"
        :readonly="readonly"
        >
      <span class="icon" v-show="value !== ''" @click="clearInputContent">
        <i class="iconfont iconty_guanbi"></i>
      </span>
      <div class="extra">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    title: {
      type: String,
      default: '账号'
    },
    errorMsg: {
      type: String,
      default: ''
    },
    invitingCode: {
      type: String,
      default: ''
    },
    question: {
      type: String,
      default: ''
    },
    chooseVal: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false 
    }
  },
  data() {
    return  {
      value: ''
    }
  },
  methods:{
    updateInputValue(e) {
      this.value = e.target.value
      this.$emit('input', this.value)
    },
    clearInputContent() {
      this.value = ''
      this.$emit('input', this.value)
    }
  },
  watch: {
    invitingCode(newVal) {
      this.value = newVal
    },
    errorMsg(newVal) {
      // if(this.$route.path !== '/signup' || this.$route.path == "/findpwd") {
      if(this.$router.path !== '/login') {
        this.value = newVal
      }
    },
    question(newVal) {
      this.value = newVal
    },
    chooseVal(newVal) {
      this.value = newVal
    }
  }
}
</script>

<style lang="stylus" scoped>  
  @import '~@/assets/styles/variables.styl'
  .input-item 
    height 70px 
    padding 10px 
    box-sizing border-box
    display flex 
    flex-direction column
    justify-content space-around
    border-radius 3px
    &.warn 
      color red
      box-shadow 0px 0px 10px $color-theme-red inset
      input 
        color red
    .input-area 
      display flex
      input
        outline-style none 
        background none
        flex 1
      input::-webkit-input-placeholder
        color #cccdd0
      input::-moz-placeholder 
        color #cccdd0
      input:-ms-input-placeholder  
        color #cccdd0
      .icon 
        width 16px 
        height 16px 
        border-radius 50% 
        background-color #cccdd0 
        display flex 
        align-items center 
        justify-content center
        .iconfont 
          color #fff 
          font-size 13px
      .extra 
        color $color-theme-red
</style>